<!--单元格-->
<script setup>

import {onMounted, ref, toRefs, watch} from "vue";

const props = defineProps({
  params: {type: String},
})
const params = toRefs(props).params
const colspan = ref(1)
const rowspan = ref(1)
const width = ref();

const WIDTH_PATTERN = /width(\d+)/
const COLSPAN_PATTERN = /colspan(\d+)/
const ROWSPAN_PATTERN = /rowspan(\d+)/

// 解析参数为对象
const parseParams = (p) => {
  if (!p) {
    return {}
  }
  // 初始化
  colspan.value = 1
  rowspan.value = 1
  width.value = undefined

  p = p.replace(/=/g, '')
  p.split(' ').forEach(item => {
    {
      let matcher = WIDTH_PATTERN.exec(item);
      if (matcher) {
        width.value = Number(matcher[1])
      }
    }
    {
      let matcher = COLSPAN_PATTERN.exec(item);
      if (matcher) {
        // console.log(matcher)
        colspan.value = Number(matcher[1])
      }
    }
    {
      let matcher = ROWSPAN_PATTERN.exec(item);
      if (matcher) {
        rowspan.value = Number(matcher[1])
      }
    }
  })

}
onMounted(() => parseParams(params.value))

watch(params, (nv) => {
  parseParams(nv)
})
</script>

<template>
  <td :colspan="colspan" :rowspan="rowspan" :style="width?`width:${width}%`:undefined" class="nga-td">
    <slot></slot>
  </td>
</template>

<style scoped>

</style>